import React, { Component,Fragment } from 'react'
//路由传参
import "./register.scss"
import axios from "axios";

import {BASE_URL,GET_USER_INFO} from '../../utils/requestPath'
import { List, InputItem, WhiteSpace,Button,
  ImagePicker, Checkbox, Flex,Accordion,Radio,Toast } from 'antd-mobile';
import Select from 'react-select';
import Logo from '../../assets/img/logo.jpg'
import OrderStart from '../../assets/img/11.png'
import OrderError from '../../assets/img/orderError.png'
import Logos from '../../assets/img/logo.png'
//添加路由
import {withRouter} from "react-router-dom"
import StartBackground from '../../assets/img/startBackground.png'
import requestAxios from '../../utils/myaxios'
import Explain from '../explain/index'
// const Option = Select.Option;
const options = [
  { value: '1', label: '亚马逊(日本)' },
  { value: '2', label: '雅虎' },
  { value: '3', label: '乐天' },
];

const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;
const RadioItem = Radio.RadioItem;
class Register extends Component {

   onChange=(value)=> {
    console.log(`selected ${value}`);
  }
  
  onBlur=()=> {
    console.log('blur');
  }
  
  onFocus=()=> {
    console.log('focus');
  }
  
  onSearch=(val)=> {
    console.log('search:', val);
  }

    state = {
        headerEsc:"<",
        footerZc:"<<隐私协议>>",
        loginStart:"<<立即登陆>>",
        checkedBox:false,
        phoneValue:"",
        emailValue:"",
        passValue:"",
        value:"",
        headerTxt:"",
        addressIp:"",
        addressTxt:"",
        addressCity:"",
        registoryCheck:false,
        RadioCheck:false,
        selectedOption: null,
        selectValue:null,
        explainStart:false,
        esc:"<",
        selectedOption: null,
        options: [
          {
            name:'渠道.....',
            value:null
          },
          {
    
            name: '乐天',
    
            value: '0',
    
          },
    
          {
    
            name: '雅虎',
    
            value: '1',
    
          },
    
          {
    
            name: '亚马逊(日本)',
    
            value: '2',
    
          },
    
        ],
        nickNameValue:"",
        //value:"选择",
        selectName:"渠道",
        orderStartImg:false,
        registerTrue:false,
        userInfoIns:{},
        confirmPassValue:""
        //value:"选择",
        //selectName:"渠道",
        //selectedOption: null,
    }

    async componentDidMount(){
       document.title="注册新用户"
       //全球ip定位
      await axios.get("https://route.showapi.com/632-1?showapi_appid=734024&showapi_timestamp=20210814160315&showapi_sign=2eefd700317c4359bc749b0436fce8d8").then(res=>{
      console.log("全球api调用地址--------------------------")
      console.log(res.data)
        const regionCity = res.data.showapi_res_body.region + res.data.showapi_res_body.city
        this.setState({
          addressIp:res.data.showapi_res_body.ip,
          addressTxt:res.data.showapi_res_body.region,
          addressCity:regionCity  //+ res.data.showapi_res_body.city
      })

      console.log(res.data.showapi_res_body.ip)
      console.log(res.data.showapi_res_body.region)
      console.log(res.data.showapi_res_body.county)
      console.log(res.data.showapi_res_body.region + res.data.showapi_res_body.city)

    })

}

    onChangePass = (val) => {
      //console.log(val.target);
      const {checkedBox} = this.state;
      const {emailValue,passValue} = this.state
      if(!checkedBox){
        this.setState({
          checkedBox:true
        })
        const checkbox = false;
        const userEmailPass = {emailValue,passValue,checkbox};
        //如果是true, accoutn pass set localStorage
        localStorage.setItem("userAccount",JSON.stringify(userEmailPass))
      }else{
        this.setState({
          checkedBox:false
        })
        //如果是false, delete pass set localStorage
        localStorage.removeItem("userAccount")
      }
      console.log(checkedBox)
    }

    //手机号
    phoneOnChange = (event)=>{
      console.log(event)
      this.setState({
        phoneValue:event
      })
    }

    //昵称
    nickNameOnChange=(event)=>{
       this.setState({
         nickNameValue:event,
         emailValue:event
       })
    }

    //邮箱
    emailOnchange=(event)=>{
      console.log(event)
      this.setState({
        emailValue:event
      })
    }

    //密码
    passOnchange=(event)=>{
      console.log(event)
      this.setState({
        passValue:event
      })
    }

    //确认密码
    confirmPassOnChange=(event)=>{
      this.setState({
        confirmPassValue:event
      })
    }


    //手风琴
    onChangeList = (key) => {
      console.log(key);
      // this.setState({
      //   RadioCheck:true
      // })
    }

    //渠道
    RadioOnChange = (value) => {
      console.log(value)
      this.setState({
        //RadioCheck:false,
        label:value
      })
      // this.setState({
      //   value
      // })
      let name = "";
      if(value === 0){
          name = "乐天";
          
      }else if(value === 1){
          name = "雅虎"
      }else if(value === 2){
        name = "亚马逊"

      }
      console.log(this.state.value)
    };

    footerOnClickBotton = ()=>{
      //this.props.history.goBack()
      this.setState({
        explainStart:false
      })
    }

    headerOnClickBotton = () =>{
        //this.props.history.goBack()
        this.setState({
          explainStart:false
        })
    }

    handleChanges = (event) => {

      //console.log(value)
      const valueLabel = parseInt(event.target.value);
      this.setState({
        //RadioCheck:false,
        //selectValue:valueLabel,
        value:valueLabel
      })
      console.log(event.target.value)

    };

    explain = ()=>{
      return (
         <div className="main-explain">
         <div className="main-explain-esc" onClick={this.headerOnClickBotton}>
             <h3>{this.state.esc}</h3>
             <h4>返回</h4>
         </div>
        <header className="main-explain-header">用户协议</header>

         <p className="main-explain-header-p1">尊敬的用户，欢迎使用由深圳前海砥砺科技有限公司（下列简称为“EZblu”或“EZblue”）提供的服务。在使用前请您阅读如下服务协议，使用本应用即表示您同意接受本协议，本协议产生法律效力，特别涉及免除或者限制EZblu责任的条款，请仔细阅读。如有任何问题，可向EZblu咨询。</p>
         <p className="main-explain-header-p2">1.服务条款的确认和接受</p>
         <p className="main-explain-header-p3">通过访问或使用本网站，表示用户同意接受本协议的所有条件和条款。</p>
         <p className="main-explain-header-p4">2. 服务条款的变更和修改</p>
         <p className="main-explain-header-p5">EZblu有权在必要时修改服务条款，服务条款一旦发生变更，将会在重要页面上提示修改内容。如果不同意所改动的内容，用户可以放弃获得的本应用信息服务。如果用户继续享用本应用的信息服务，则视为接受服务条款的变更。本应用保留随时修改或中断服务而不需要通知用户的权利。本应用行使修改或中断服务的权利，不需对用户或第三方负责。</p>
         <p className="main-explain-header-p6">用户行为</p>
         <p className="main-explain-header-p7">3.1 用户账号、密码和安全</p>
         <p className="main-explain-header-p8">用户一旦注册成功，便成为EZblu的合法用户，将得到一个密码和帐号。同时，此账号密码可登录EZblu的所有网页和APP。因此用户应采取合理措施维护其密码和帐号的安全。用户对利用该密码和帐号所进行的一切活动负全部责任；由该等活动所导致的任何损失或损害由用户承担，EZblu不承担任何责任。 用户的密码和帐号遭到未授权的使用或发生其他任何安全问题，用户可以立即通知EZblu，并且用户在每次连线结束，应结束帐号使用，否则用户可能得不到EZblu的安全保护。对于用户长时间未使用的帐号，EZblu有权予以关闭并注销其内容。</p>
         <p className="main-explain-header-p9">隐私条款</p>
         <p className="main-explain-header-p10">3.2用户信息公开情况说明</p>
         <p className="main-explain-header-p11">尊重用户个人隐私是EZblu的一项基本政策。所以，EZblu不会在未经合法用户授权时公开、编辑或透露其注册资料及保存在本应用中的非公开内容，除非有下列情况：</p>
         <p className="main-explain-header-p12">（1）有关法律规定或EZblu合法服务程序规定；</p>
         <p className="main-explain-header-p13">（2）在紧急情况下，为维护用户及公众的权益；</p>
         <p className="main-explain-header-p14">（3）为维护EZblu的商标权、专利权及其他任何合法权益；</p>
         <p className="main-explain-header-p15">（4）其他需要公开、编辑或透露个人信息的情况；</p>
         <p className="main-explain-header-p16">3.3在以下（包括但不限于）几种情况下，EZblu有权使用用户的个人信息：</p>
         <p className="main-explain-header-p17">（1）在进行促销或抽奖时，EZblu可能会与赞助商共享用户的个人信息，在这些情况下EZblu会在发送用户信息之前进行提示，并且用户可以通过不参与来终止传送过程；</p>
         <p className="main-explain-header-p18">（2）EZblu可以将用户信息与第三方数据匹配；</p>
         <p className="main-explain-header-p19">（3）EZblu会通过透露合计用户统计数据，向未来的合作伙伴、广告商及其他第三方以及为了其合法目的而描述EZblu的服务；</p>
         <p className="main-explain-header-p20">3.4隐私权政策适用范围</p>
         <p className="main-explain-header-p21">（1）用户在登录本应用服务器时留下的个人身份信息；</p>
         <p className="main-explain-header-p22">（2）用户通过本应用服务器与其他用户或非用户之间传送的各种资讯；</p>
         <p className="main-explain-header-p23">（3）本应用与商业伙伴共享的其他用户或非用户的各种信息；</p>
         <p className="main-explain-header-p24">3.5资讯公开与共享</p>
         <p className="main-explain-header-p25">EZblu不会将用户的个人信息和资讯故意透露、出租或出售给任何第三方。但以下情况除外：</p>
         <p className="main-explain-header-p26">（1）用户本人同意与第三方共享信息和资讯;</p>
         <p className="main-explain-header-p27">（2）只有透露用户的个人信息和资讯，才能提供用户所要求的某种产品和服务;</p>
         <p className="main-explain-header-p28">（3）当你使用本站的服务时，我们的主机会自动记录用户的浏览器在访问网站时所发送的信息和资讯。主机日志资讯包括但不限于用户的网路请求、IP地址、浏览器类型、浏览器使用的语言、请求的日期和时间，以及一个或多个可以对用户的浏览器进行辨识的cookie。</p>
         <p className="main-explain-header-p29">4.账户删除申请  </p>
         <p className="main-explain-header-p30">用户有权在任何时候编辑用户在EZblu的帐户信息和资讯，用户也可以填写相关申请表格，要求删除个人帐户，但是用户无条件同意在你的帐户删除后，该帐户内及与该帐户相关的信息和资讯仍然保留在本网站档案记录中，除上述第三条规定的情况外，EZblu将为用户保密。</p>
         
         <p className="main-explain-header-p31"></p>

         <div className="main-explain-header-footer">
             <button
             onClick={this.footerOnClickBotton}
             className="main-explain-botton">确定</button>
         </div>

     </div>
      )
    }


    // 注册
    register =async ()=>{
      const userInfoIns = localStorage.getItem("userInfoIns")
      const user = await JSON.parse(userInfoIns) || {}
      const {
        checkedBox,phoneValue,emailValue,passValue,
        value,headerTxt,addressIp,
        addressTxt,addressCity,nickNameValue,confirmPassValue,
        registoryCheck,RadioCheck,selectValue} = this.state;
      if(nickNameValue.length > 2 
        ){
      }else{
        Toast.info('输入信息有误', 2, null, false);
        return;
      }  

      if(passValue !== confirmPassValue){
        Toast.info('密码输入不一致', 2, null, false);
        return;
      }

      if(!registoryCheck){
        Toast.info('请签订注册协议', 2, null, false);
        return;
      }
      
      let passWord = passValue;
      let zgEmail = emailValue;
      let telephone = phoneValue;
      let address = addressCity;
      let ipAddress = addressIp;
      let platformAddress = value;
      let userName = nickNameValue;
      Toast.loading('Loading...', 1, () => {
        console.log('Load complete !!!');
      });

      const userInfo = {passWord,address,ipAddress,platformAddress,userName};
      await requestAxios.post(BASE_URL+"/api/user/add/userInfo",userInfo).then(res=>{
        //debugger
        console.log(res)
        
        //判断返回信息
        if(res.data.flag){
          this.setState({
            userInfoIns:res.data.zgUser
          })
          //获取data 存入localstorage
          localStorage.setItem("userInfoIns",JSON.stringify(res.data.zgUser))

          //注册成功得3000积分
          this.setState({
            orderStartImg:true,
            registerTrue:true
          })

          //注册成功
          //this.props.history.push("/navigator");
        
        }else{
          Toast.info(res.data.message, 2, null, false);
          return;
        }
      })

      if(this.state.registerTrue){
        //debugger
        const id = this.state.userInfoIns.id;
        const type = 2;
        const userInfo = {id,type};
          //如果注册成功,增加积分.....  
         await requestAxios.post(BASE_URL+"/api/order/add/start",userInfo).then(res=>{
            console.log(res)
          })
      }
    }

    handleClick = (params) => {
        this.props.history.push("/searchCenter");
    }

    registarOnChange = (e)=>{
    
      if(!this.state.registoryCheck){          
        this.setState({
          registoryCheck:true
        })  
      }else{
        this.setState({
          registoryCheck:false
        })
      }
      
    }

    loginOnClick = ()=>{
      console.log("立即登陆")
      this.props.history.push("/login");
    }

    explainOnClick = () =>{
      //this.props.history.push("/explain")
      this.setState({
        explainStart:true
      })
    }

    handleChange = selectedOption => {

      console.log(selectedOption)

      this.setState({ selectedOption });
      console.log(`Option selected:`, selectedOption);
      let selectValue = parseInt(selectedOption.value)
      this.setState({
        selectValue
      })

    };

    //开心收下去使用
    lwOnClick = ()=>{
      // 跳转我的个人中心 navigator
      this.props.history.push("/navigator");
    }

    //关闭也是跳转 navigator
    orderErrorOnClick=()=>{
      this.props.history.push("/navigator");
    }


    
    render() {
        const {headerEsc,footerZc,loginStart,checkedBox,
          phoneValue,value,registoryCheck,RadioCheck,label,options,selectedOption,selectName} = this.state
        const data = [
          { value: 0, label: '乐天' },
          { value: 1, label: '雅虎' },
          { value: 2, label: '亚马逊' },
          ];
         // const { selectedOption } = this.state;
        return (
            <div className="main-app-register">
              
              <div>
                 {/* 顶部返回键 */}
            <header className="main-header">
                {/* 返回箭头 */}
                <section className="main-header-esc">{headerEsc}</section>
                {/* 欢迎 */}
                <seciton className="main-header-hello">こんにちは、</seciton>
                {/* 欢迎来到....EZblu */}
                <div className="main-header-ezblu">
                    <section className="main-header-hello-font">EZBLUへようこそ</section>
                    <img className="main-header-hello-img" src={Logos}></img>
                </div>
            </header>
  
            {/* 中部 from表单页 */}
            <main className="app-main">
                {/* <InputItem
                style={{background:"none"}}
                  className="app-main-phone"
                  //type="phone"
                  placeholder="请输入手机号"
                  //error={this.state.hasError}
                  //onErrorClick={this.onErrorClick}
                  onChange={this.phoneOnChange}
                  value={this.state.phoneValue}
              >手机号码</InputItem> */}
              <InputItem
                style={{background:"none"}}
                  className="app-main-phone"
                  //type="phone"
                  placeholder="ユーザID"
                  //error={this.state.hasError}
                  //onErrorClick={this.onErrorClick}
                  onChange={this.nickNameOnChange}
                  value={this.state.nickNameValue}
              ></InputItem>
                
                 {/* <InputItem
                 style={{background:"none"}}
                  className="app-main-email"
                  type="email"
                  placeholder="请输入邮箱"
                  //error={this.state.hasError}
                  //onErrorClick={this.onErrorClick}
                  onChange={this.emailOnchange}
                  value={this.state.emailValue}
              >邮箱</InputItem> */}

            {/* <div style={{width:"100%",display:"flex",position:"relative",flexDirection:"row",justifyContent:"center",alignItems:"center"}}>
            <Fragment
              //className="registory_select"
              >
                <select 
                className="registory_select"
                onChange={this.handleChanges} value={value}>
                  {options.map(item => (
                    <option key={item.value} value={item.value}>
                      {item.name}
                    </option>
                  ))}
                </select>
              </Fragment>
            </div> */}
                <InputItem
                style={{background:"none"}}
                  className="app-main-pass"
                  type="password"
                  placeholder="パスワード"
                  //error={this.state.hasError}
                  //onErrorClick={this.onErrorClick}
                  onChange={this.passOnchange}
                  value={this.state.passValue}
              ></InputItem>

              <InputItem
                style={{background:"none"}}
                  className="app-main-passcof"
                  type="password"
                  placeholder="もう一度パスワードを入力してください"
                  //error={this.state.hasError}
                  //onErrorClick={this.onErrorClick}
                  onChange={this.confirmPassOnChange}
                  value={this.state.confirmPassValue}
              ></InputItem>
            </main>
  
          {/* 记住密码 */}
          <div className="app-pass">

            {/* 记住密码 */}
              <div className="app-pass-left">
                <Flex>
                <Flex.Item>
                  <AgreeItem
                   checked={checkedBox}
                   data-seed="logId" onChange={e => this.onChangePass(e)}>
                  <a onClick={(e) => { e.preventDefault()}} style={{fontWeight:'bold'}}>パスワードを保存する
</a>
                  </AgreeItem>
                </Flex.Item>
              </Flex>
              </div>

               {/* 立即登陆 */}
             {/* <div className="app-pass-right">
                <h4>已有账号<span onClick={this.loginOnClick}>{loginStart}</span></h4>
            </div> */}
          </div>

          {/* 登陆按钮 */}
          <div className="app-login">
            <div className="app-login-botton">
              <Button className="app-login-botton-con"
              onClick={this.register}
              type="primary" style={{backgroundColor:"rgb(107, 192, 223)",fontWeight:"800",border:"none"}}>ログイン</Button></div>
          </div>
         
          {/* 底部按钮 */}
          <div className="app-privacy-policy">
            <Flex>
                <Flex.Item>
                  <AgreeItem 
                  checked={registoryCheck}
                  style={{fontWeight:'bold',fontSize:12}} data-seed="logId" onChange={e=>this.registarOnChange(e)}>
                  <a style={{fontWeight:400,fontSize:12}} onClick={(e) => { e.preventDefault()}} >登録規約を同意して次へ<a onClick={this.explainOnClick} style={{color:"rgb(54, 219, 255)"}}>{footerZc}</a></a>
                  </AgreeItem>
                </Flex.Item>
              </Flex>
          </div>
          {/* asdf */}
              </div>
              {this.state.explainStart?
              <div className="main-app-explain-button" style={{position:"absolute",width:"100%",height:"100%",top:0,background:"#fff"}}>
                  {this.explain()}
              </div>:<span></span>}
              {this.state.orderStartImg?<div style={{position:"absolute",width:"100%",
                height:"100vh",background:"#fff",paddingTop:70,top:0,
                display:"flex",flexDirection:"column",
                alignItems:"center",justifyContent:"space-around"}}>
                    <div style={{height:36,width:240,background:"rgb(32, 32, 32)",
                    borderRadius:5,display:"flex",flexDirection:"row",
                    justifyContent:"center",alignItems:"center",}}>
                        <h4 style={{width:182,height:26,
                            alignItems:"center",
                            lineHeight:2,
                            color:"rgb(245, 245, 245)",border:"1px solid rgb(250, 250, 250)",
                            borderRadius:10,textAlign:"center",}}>新規入会でポイントが貯まる</h4>
                    </div>       
                    <div style={{position:"relative",width:"100%",height:380,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}}>
                        <div style={{position:"absolute",display:"flex",flexDirection:"column",alignItems:"center",height:380,width:"100%"}}>
                            <h2 style={{color:"rgb(230, 60, 57)",lineHeight:2,marginTop:70,fontSize:18,}}>登録で</h2>
                            <h3 style={{color:"rgb(230, 60, 57)",lineHeight:2,marginTop:5}}><span style={{fontSize:28,letterSpacing:2,fontWeight:"bold"}}>3000</span>ポイントをもらう</h3>
                            <h4 style={{color:"rgb(230, 60, 57)",lineHeight:2,marginTop:5}}>１円につき10ポイント</h4>
                            <h5 style={{color:"rgb(230, 60, 57)",
                            lineHeight:1.9,marginTop:68,fontSize:18,
                            height:36,width:84,background:"rgb(250, 200, 13)",borderRadius:8,textAlign:"center"}}>会員限定</h5>
                        </div>    
                        <img src={OrderStart}>
                            
                        </img>
                    </div>    
                    
                    <h3 onClick={this.lwOnClick} style={{width:217,height:36,background:"rgb(229, 60, 57)",borderRadius:14,lineHeight:2.8,color:"#fff",textAlign:"center"}}>
                    ポイントの使用へ
                    </h3> 

                    <div onClick={this.orderErrorOnClick} style={{width:45,height:45,borderRadius:45,background:"#fff",border:"#000",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}}>
                        <img style={{width:40,height:40}} src={OrderError}></img>
                    </div>       
                </div>:""}
        </div>
        )
    }
}
export default withRouter(Register)
